<template>
  <NewCard title="收银台" isright="isright" isleft="isleft">
    <template slot="left">
        <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
    </template>
      <template slot="right">
          <!-- <span class="hintRight">请在 {{getTime}} 内完成支付，超时订单自动取消</span> -->
          <span class="hintRight">请在 <DownTime :time="timestamp"></DownTime> 内完成支付，超时订单自动关闭</span>
      </template>
      <div class="pay">
        <div class="pay_main">
            <el-card shadow="never">
                <h3>{{project.firstName}}-{{project.secondaryName}}-{{project.threeName}}</h3>
                <p>订单总额：{{project.base | sumFilters}}</p>
                <p>应付问金：{{project.nowBase | sumFilters}}</p>
            </el-card>
            <el-row>
                <el-col :span="12" :md="24">
                    <p class="inputTitle">接收信息</p>
                    <el-input v-model="acceptEmail" placeholder="请输入邮箱" @blur="rulEmail(acceptEmail)">
                      <!-- <router-link to="/Bm-personalCenter/userSetting" slot="suffix">
                        <button class="acceptEmail">换绑邮箱</button>
                      </router-link> -->
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <Compay ref="compay" :orderinfo="orderinfo" :nextFlowId="nextFlowId" :acceptEmail="acceptEmail"></Compay>
                </el-col>
            </el-row>
        </div>
        <div class="payBtn" v-if="payBtnShow">
            <p>应付问金：<span>{{project.nowBase | sumFilters}}</span></p>
            <el-button round @click="payBtn">立即支付</el-button>
        </div>
      </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import Compay from "@/BMViews/components/Compay/index.vue";
import { getDepositVoucherPayApi } from "@/BMViews/api/financial/deposit.js";
import { editProjectApi } from "@/BMViews/api/doc/project.js"
import DownTime from "@/components/downTime/index.vue"
import debounce from "lodash/debounce";
export default {
    name:'Pay',
    components:{NewCard,Compay,DownTime},
    props: {
        project: {
            type: Object,
            default: () => {
                return {};
            },
        },
        orderinfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
        step: {
            type: Array,
            default: () => {
                return {};
            },
        },
        flowId: {
            type: String,
        },
    },
    data(){
        return{
            isright:true,//显示时间提示支付
            email:'',//电邮
            acceptEmail:'',//接收邮箱
            activeName:'askGold',//默认显示问金支付
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",//头像
            askRadio:'2',
            
            minutes: 15, //分
            seconds: 0, //，秒
            //订单信息
            order:{
                id:"",
                amount: 0,
                flowId:'',
            },
            nextFlowId:'', //第二步的id

            payBtnShow: true,// 当前底部支付按钮的显示隐藏
            timestamp: 0,//时间戳
        }
    },
    mounted(){
        // 拿到默认绑定的邮箱
        this.acceptEmail = this.$store.state.user.email
        // 获取订单的id
        this.orderinfo.id = this.orderinfo.orderId
        // 获取订单的第二步id
        this.getNextFlowId()
        // 获取订单的金额
        this.orderinfo.amount = this.project.nowBase
        // 获取项目当前步骤的id
        this.orderinfo.flowId = this.flowId
        // this.countdown();//倒计时

        // 获取时间戳
        let nowDate = new Date()
        let date = new Date(this.orderinfo.data.createdTime)
        this.timestamp = date.getTime() + 60*1000*15 - nowDate.getTime()

        // 通过$bus的扫码支付成功后执行的函数
        this.$bus.$on('EventPaymentCompletion',()=>{
            // 支付成功后跳转到当前项目的聊天页面
            this.$router.push({
                path:'/Bm-personalCenter/messageCenter',
                query: {orderId: this.orderinfo.oderNo},
            })
        })

        // 当切换到二维码支付的时候要隐藏底部的按钮
        this.$bus.$on('hidePayBtn',(name)=>{
            if(name == 'scanQr'){
                this.payBtnShow = false
            }else{
                this.payBtnShow = true
            }
        })

        // 支付时间到跳转回推荐页
        this.$bus.$on('CountdownOff',()=>{
            this.$bus.$emit('returnFeat', 1) //1推荐内容
        })
    },
    watch:{
        // 获取订单的id
        goodsList(newValue,oldValue){
            this.orderinfo.id = this.orderinfo.orderId
            this.getNextFlowId()
        }
    },
    methods:{
        // 点击返回按钮
        returnBtn(){
            this.$bus.$emit('handlerPay',2)
        },

        // 获取当前步骤的下一步
        getNextFlowId(){
            let newStep = [] //把所有子项转成一整个数组
            this.step.forEach(item=>{
                newStep = [...newStep,...item.children]
            })
            //根据no字段排序
            let arr = newStep.sort((a, b) => Number(a.no)- Number(b.no))
            this.nextFlowId = arr[1].id
        },
        
        // *******************电邮*******************
        // 邮箱的验证
        rulEmail(email){
            let reg = /^[A-Za-z0-9_\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if(email==""){
                this.$message({type:'warning',message:'邮箱不能为空！'})
            }else{
                if(!reg.test(email)){
                    this.$message({type:'warning',message:'请输入有效的邮箱！'})
                }
            }
        },

        // 问金支付
        payBtn: debounce(function(){
            // 邮箱不能为空
            if(this.acceptEmail == ""){
                this.$message({type:'warning',message:'邮箱不能为空！'})
            }else{
                //邮箱验证
                let reg = /^[A-Za-z0-9_\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if(!reg.test(this.acceptEmail)){
                    this.$message({type:'warning',message:'请输入有效的邮箱！'})
                }else{
                    this.askGoldPay() //支付回调
                }
            }
            // this.askGoldPay() //支付回调
        },1000),

        // 支付回调
        async askGoldPay(){
            let circleId = await this.$refs.compay.getCirecleDefaultPay();
            let { code, msg } = await getDepositVoucherPayApi({
                circleId,
                orderId: this.orderinfo.id,
                flowId: this.flowId,
                nextFlowId: this.nextFlowId,
                email: this.acceptEmail
            });
            if (code != 200) return;
            this.$message({message: "支付成功！",type: "success",});
            
            // 支付成功后跳转到当前项目的聊天页面
            this.$router.push({
                path:'/Bm-personalCenter/messageCenter',
                query: {orderId: this.orderinfo.orderNo},
            })
        },

        // 项目修改的接口
        async editProject(newArr){
            let data = {
                id: this.orderinfo.data.goodsId,
                flows: newArr,
            }
            let result = await editProjectApi(data)
            if(result.code == 200){
                // this.$message({ type: "success", message: "保存成功！" });
            }
        },

        //倒计时
        num(n) {
            return n < 10 ? "0" + n : "" + n;
        },
        countdown() {
            var _this = this;
            var time = window.setInterval(function () {
                if (_this.seconds === 0 && _this.minutes !== 0) {
                    _this.seconds = 59;
                    _this.minutes -= 1;
                } else if (_this.minutes === 0 && _this.seconds === 0) {
                    _this.seconds = 0;
                    window.clearInterval(time);
                    _this.changes();
                } else {
                    _this.seconds -= 1;
                }
            }, 1000);
        },

        //返回推荐页面
        changes() {
          // this.$bus.$emit('featHandlerShow', 1)
        },

    },

    computed: {
        //计算时间
        second() {
            return this.num(this.seconds);
        },
        minute() {
            return this.num(this.minutes);
        },
    },

    watch: {
        //监听时间
        second: {
            handler(newVal) {
                this.num(newVal);
            },
        },
        minute: {
            handler(newVal) {
                this.num(newVal);
            },
        },
    },
}
</script>

<style scoped>
.hintRight{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
}
::v-deep .el-card__body{
    position: relative;
}
/* 支付信息 */
.pay{
    margin-top: 15px;
}
.pay_main{
    margin-bottom: 70px;
}
.pay_main .el-card{
    border-radius: 12px;
}
::v-deep .pay_main .el-card__body{
    padding: 20px!important;
}
.pay_main h3{
    margin: 0;
    margin-bottom: 12px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
}
.pay_main p{
    font-size: 14px;
    color: #999;
    margin: 0;
    line-height: 24px;
}
.pay_main .el-row{
    margin-top: 40px;
}
::v-deep .pay_main .el-row .el-input__inner{
    border-radius: 8px;
    height: 44px;
    line-height: 44px;
}
.pay_main .el-row .acceptEmail{
    border: 0;
    padding: 5px 0;
    margin: 7px 0;
    margin-right: 10px;
    font-size: 14px;
    color: #BABABA;
    background: #fff;
    cursor: pointer;
}
.pay_main .el-row .acceptEmail:hover{
    color: #f87a23;
    
}
.pay_main .inputTitle{
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}
.pay_main .inputTitle span{
    font-size: 14px;
    color: #999;
    font-weight: 400;
}
::v-deep .pay_main .el-tabs__header{
    border: 0;
    margin-bottom: 24px;
}
::v-deep .pay_main .el-tabs__nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 0;
}
::v-deep .pay_main .el-tabs__item{
    width: 49%;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border: 0;
    background-color: #FAFAFA;
}
::v-deep .pay_main .el-tabs__item.is-active{
    background-color: #F1F3FF;
    color: #39486F;
}
::v-deep .pay_main .el-tabs__item:hover{
    color: #39486F;
}

.askGold{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.askGold li{
    display: flex;
    margin-bottom: 24px;
}
.askGold li .el-avatar{
    margin-right: 14px;
}
.askGold .askInfo h3{
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}
.askGold .askInfo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ECEDF0;
    padding-bottom: 24px;
}
.askGold .askInfo p{
    font-size: 12px;
    color: #666;
}
.askGold .askInfo button{
    color: #39486F;
    border-color: #39486F;
    padding: 5px 15px;
}
::v-deep .askInfo .el-radio__label{
    display: none;
}
::v-deep .askInfo .el-radio .el-radio__inner{
    width: 24px;
    height: 24px;
    border-color: #BBBBBB;
    background: #fff;
}
::v-deep .askInfo .el-radio .is-disabled .el-radio__inner{
    background: #F2F2F2;
}
::v-deep .askInfo .el-radio .is-checked .el-radio__inner{
    border-color: #f87a23;
    background: #f87a23;
}
::v-deep .askInfo .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width:11px;
    height: 7px;
    border: 3px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 6px;
    left: 5px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;  
}
.payBtn{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #ECEDF0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
}
.payBtn p{
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}
.payBtn p>span{
    color: #f87a23;
    font-size: 16px;
}
.payBtn .el-button{
    background-color: #f87a23;
    border-color: #f87a23;
    color: #fff;
    font-size: 14px;
    padding: 10px 50px;
}
.payBtn .el-button:hover{
    opacity: 0.9;
}

.scanQr{
    text-align: center;
}
.scanQr img{
    width: 150px;
}
.scanQr p{
    color: #f87a23;
    font-size: 18px;
    font-weight: bold;
}
.scanQr span{
    font-size: 12px;
    color: #999;
}
</style>
<style scoped>
/* 响应式 */
@media (max-width: 1120px) {
    ::v-deep .top .right{
        flex: 2;
    }
    .payBtn{
        padding: 12px 20px !important;
    }
    .payBtn .el-button{
        padding: 8px 30px
    }

    .pay_main .el-row{
        margin-top: 30px;
    }
    .pay_main .el-row .el-row{
        margin-top: 0px;
    }
}
</style>